<!-- @format -->

<template>
  <!-- 子页面的头部导航栏-->
  <view>
	  <view class="header" :style="style">
		  <view class="flexbox" :style="[{ height: customBarH + 'px' }]">
		    <view
		      class="content"
		      :style="[{ top: customTop + 'px', left: customLeft + 'px' }]">
		      <view
		        class="back-home"
		        :style="[{ width: customWidth + 'px', height: customHeight + 'px' }]">
		        <uni-icons
		          color="#000"
		          type="back"
		          size="25px"
		          @click="goBack"></uni-icons>
		        <view class="line"> </view>
		        <uni-icons
		          color="#000"
		          type="home"
		          size="25px"
		          @click="goIndex"></uni-icons>
		      </view>
		    </view>
		    <view
		      class="text"
		      :style="[
		        { height: customBarH + 'px', 'padding-top': statusBarH + 'px' },
		      ]">
		      热榜
		    </view>
		    
		  </view>
		  
	  </view>
	    <image class="img-bc" :src="imgList"></image>

	<view style="position:absolute;z-index:99;top: 75px;">
		<view class="tabs">
		  <view
		    v-for="(item, index) in tabs"
		    :key="item"
		    :class="{
		      active: tabIndex === index,
		    }"
		    :style="{ background }"
		    @tap="changeTab(index, item)">
		    <image
		      class="tabImg"
		      v-if="tabIndex === index"
		      :src="item.imgChecked"
		      mode="scaleToFill" />
		    <image
		      class="tabImg"
		      v-else
		      :src="item.imgUnchecked"
		      mode="scaleToFill" />
		  </view>
		</view>
		<view class="hotContent">
		  <view class="hotCard" :style="{ background: backGroundColors }">
		    <view class="title">
		      <text class="contentNum">排名</text>
		      <text class="contentName">名称</text>
		      <text class="contentScore">{{ unit }}</text>
		    </view>
		    <view
		      v-for="(item, id) in classLister"
		      :key="id"
		      class="studentslister"
		      @tap="goForward(item)">
			  
		      <view class="textNum" style="    margin-left: 50rpx;">
		
		          <view v-if="id === 0">
		            <image
		              class="icons img"
		              src="../../../myPackageA/static/popular/firstOne.png" />
		          </view>
		          <view v-else-if="id === 1">
		            <image
		              class="icons img"
		              src="../../../myPackageA/static/popular/secondTwo.png" />
		          </view>
		          <view v-else-if="id === 2">
		            <image
		              class="icons img"
		              src="../../../myPackageA/static/popular/thirdThree.png" />
		          </view>
		          <view v-else class="icons iconText">{{ id + 1 }}</view>
					</view>
			   <view class="text">{{ item.itemName }}</view>
		      <view class="numText">{{ item.basis }}</view>
		    </view>
		
		  </view>
		  	  
		</view>

	</view>
  <view style="height:50px;width:100%;margin-top:0rpx;position: absolute;"></view>	
  </view>
</template>

<script>
export default {
  props: {
    childTitle: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      statusBarH: 20,
      customBarH: 70,
      contentH: 0,
      customWidth: 0, //自定义胶囊的宽度
      customHeight: 0, //自定义胶囊的高度
      customTop: 0, //自定义胶囊距离顶部的距离
      customLeft: 0, //自定义胶囊距离左侧的距离
      tabs: [],
      tabIndex: 0,
      listId: 0,
      unit: '',
      imgList: '',
      imgChecked: '',
      //要渲染的那个数组
      classLister: [],
      backGroundColors: '',
    }
  },
  computed: {
    style() {
      let _style = `height: ${this.customBarH}px;`
      return _style
    },
  },
  onLoad(options) {
    this.getHotName()
  },
  methods: {
	  onShareAppMessage() {
	  return {
	      title: '热榜',
	      imageUrl: this.img,
	    }
	  },
	  onShareTimeline() {
	    return {
	      title: '热榜',
	      imageUrl: this.img,
	    }
	  },
    getHotName() {
      let _this = this
      uni.request({
        url: this.$httpApi.install.hotName,
        method: 'GET',
        success(res) {
			console.log(res)
          _this.tabs = res.data.data
          _this.unit = _this.tabs[0].unit
          _this.listId = _this.tabs[0].listId
          console.log('评分', _this.tabs)
          //this.imgChecked = res.data.data.imgChecked
          _this.getList()
        },
      })
      uni.request({
        url: this.$httpApi.install.hotImgList,
        method: 'GET',
        success(res) {
          console.log('neri', res.data.data)
          _this.imgList = res.data.data.imgUrl
          _this.backGroundColors =
            'linear-gradient(' +
            res.data.data.gradientColorStart +
            ',' +
            res.data.data.gradientColorEnd +
            ')'

          // 'linear-gradient(90deg,' + this.colors1 + ',' + this.colors2 + ')'
         // console.log(this.backGroundColors)

          // res.data.data.gradientColorStart +
          //   ',' +
          //   res.data.data.gradientColorStart
        },
      })
    },

    getList() {
		console.log('go')
      let _this = this
      // 列表内容
      uni.request({
        url: this.$httpApi.install.hotList,
        method: 'GET',
        data: {
          listId: _this.listId,
        },
        success(res) {
          console.log('neri', res.data.data)
          _this.classLister = res.data.data
        },
      })
    },
    goBack() {
      uni.navigateBack()
    },
    goIndex() {
      uni.switchTab({
        url: '/pages/index/index',
      })
    },
    changeTab(index, item) {
      console.log('uite', item)
      this.listId = item.listId
      this.getList()
      this.tabIndex = index
      this.unit = item.unit
    },
    goForward(item) {
      if (item.listType === '0') {
        return
      } else if (item.listType === '1' || item.listType === '3') {
        // 雪场
        uni.navigateTo({
          url: `/myPackageA/pages/snowPackIntro/snowPackIntro?id=${item.slopeId}`,
        })
      } else {
        // 商家
        uni.navigateTo({
          url: `/myPackageA/pages/storeIntro/storeIntro?id=${item.bussinessId}`,
        })
      }
    },
  },

  created() {
    let self = this
    uni.getSystemInfo({
      success: function (e) {
        self.statusBarH = e.statusBarHeight + 10
        let screenWidth = e.screenWidth
        // 获取用户手机胶囊的位置信息
        let custom = uni.getMenuButtonBoundingClientRect()
        self.customHeight = custom.height //胶囊的高度
        self.customWidth = custom.width //胶囊的宽度
        self.customTop = custom.top //胶囊的顶部距离最顶部的距离
        self.customLeft = screenWidth - custom.right //胶囊距离左侧的距离
        self.customBarH = custom.height + custom.top + 10
        // 将高度值传给父页面
        self.$emit('getMarginTop', self.customBarH)
        self.contentH = custom.statusBarHeight - custom.top
      },
    })
  },
}
</script>

<style lang="scss" >

	page{
		background-color: #AD8154;
	}
.hotCardImg {
}
.hotContent {
  padding: 0 30rpx;
  margin-top: 3%;
  .hotCard {
    position: absolute;
    width: 690rpx;
    // height: 900rpx;

    // background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
    z-index: 99999;
    overflow-x: hidden;
  }
}
.tabImg {
  // width: 100%;
  // height: 100%;
  width: 223rpx;
  height: 112rpx;
  display: inline-block !important;
  z-index: 999889999;
  overflow: auto;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  // height: 112rpx;
  line-height: 80rpx;
  margin-top: 150rpx;
  margin-left: 23rpx;
}

.tabs view {
  // position: relative;
  width: 223rpx;
  margin-top: 10rpx;
  height: 112rpx;
  margin-left: 10rpx;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  // position: absolute;
  // background-color: #888;
}

.tab-scroll {
  flex: 1;
  // overflow: hidden;
  box-sizing: border-box;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.title {
  display: flex;
  font-size: 24rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #a4a4a4;

  margin-top: 30rpx;

  .contentNum {
	  width: 48rpx;
	  height: 24rpx;
	  margin-left: 56rpx;
  }
  .contentName {
	  width: 48rpx;
	  height: 24rpx;
   margin-left: 33rpx;
  }
  .contentScore {
	  width: 72rpx;
	  height: 24rpx;
margin-left: 367rpx;
  }
}
.studentslister {
  display: flex;

align-items: center;
  margin: 14rpx 0;

  .icons {
    width: 58.47rpx;
    height: 56.27rpx;
    font-size: 28rpx;

    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    color: #303030;

	    display: flex;
	    align-items: center;
	    justify-content: center;
  }

  .iconText {
   
  }
  .text {
    width: 380rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
	margin-left: 29rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .textNum {
    display: flex;
    align-items: end;
  }
  .textimage {
    width: 100rpx;
  }
  .numText {
    width: 30rpx;

    font-size: 28rpx;
	margin-left: 74rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    color: #303030;
  }
}

.img-bc {
  width: 750rpx;
  height: 100vh;
}
.header {
  width: 100vw;
  position: fixed;
}

.flexbox {
  height: 100%;
  text-align: center;
  .back-img {
    width: 750rpx;
    height: 1380rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .content {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;

    .back-home {
      // padding: 6rpx 16rpx;
      border: 2rpx solid #ccc;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .line {
        width: 2rpx;
        height: 30rpx;
        background-color: #ccc;
      }
    }
  }
}
</style>
